<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>simple</title>
    <script src="./js/bootstrap.bundle.js"></script>
    <link rel="stylesheet" href="./css/bootstrap.css">
    </link>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
</head>

<body>
    <style>
        .close-btn {
            border-radius: var(--bs-border-radius);
            margin-left: 10px;
            padding: 10px;
        }

        .close-btn:hover {
            background-color: var(--bs-primary);
            ;
        }
    </style>
    <button type="button" class="btn btn-primary">go</button>
    <div style="display:flex">
        <ul class="nav nav-tabs" id="myTab">
            <li class="nav-item">
                <button class="nav-link active" id="home-tab" data-bs-toggle="tab"
                    data-bs-target="#home-tab-pane">Home<i class="close-btn bi bi-x-lg"></i></button>
            </li>
            <li class="nav-item">
                <button class="nav-link" id="profile-tab" data-bs-toggle="tab"
                    data-bs-target="#profile-tab-pane">Profile<i class="close-btn bi bi-x-lg"></i></button>
            </li>
            <li class="nav-item">
                <button class="nav-link" id="contact-tab" data-bs-toggle="tab"
                    data-bs-target="#contact-tab-pane">Contact <i class="close-btn bi bi-x-lg"></i></button>
            </li>
            <li class="nav-item">
                <button class="nav-link" id="disabled-tab" data-bs-toggle="tab"
                    data-bs-target="#disabled-tab-pane">Disabled
                    <i class="close-btn bi bi-x-lg"></i></button>
            </li>
            <button class="btn btn-sm btn-outline-primary" id="myAddBtn"><i class="bi bi-plus-lg"></i></button>
        </ul>
        <button class="btn btn-sm btn-outline-primary" style=""><i class="bi bi-plus-lg"></i></button>
    </div>
    <div class="tab-content" id="myTabContent">
        <div class="tab-pane fade show active" id="home-tab-pane" tabindex="0">.dddd..</div>
        <div class="tab-pane fade" id="profile-tab-pane" tabindex="0">xxxx</div>
        <div class="tab-pane fade" id="contact-tab-pane" tabindex="0">.yyyyyyyy.</div>
        <div class="tab-pane fade" id="disabled-tab-pane" tabindex="0">.yyyyyyyy</div>
    </div>
    <script>
        let myAddBtn = document.querySelector("#myAddBtn")
        let myTab = document.querySelector("#myTab");
        let count = 1;
        let currentActiveButton = document.querySelector(".nav-link.active");
        let currentActiveItem = currentActiveButton.parentNode;
        let myTabContent = document.querySelector("#myTabContent");
        myTab.addEventListener("click", (e) => {
            let icon = e.target.closest("button.nav-link i");
            let targetbtn = e.target.closest("button.nav-link");
            console.log(icon, "ss", targetbtn, "ss")
            console.log("ct", currentActiveButton, currentActiveItem, "ct")
            // 对于不精系的e.target ===b
            if (icon) {
                let nextActiveContent;
                let nextActiveButton;
                let nextActiveItem;
                let button = icon.parentNode;

                // let next = b.previous
                let item = button.closest(".nav .nav-item");
                let selector = button.dataset.bsTarget;
                let content = myTabContent.querySelector(selector);

                // 赋值
                if (currentActiveButton === button) {
                    console.log("活跃为待删除", currentActiveButton, button)
                    // 如果当前活跃页面是待删除页面
                    nextActiveItem = item.previousElementSibling
                        || item.nextElementSibling;
                    // console.log(nextActiveItem, nextActiveButton, nextActiveContent)
                    nextActiveButton = nextActiveItem.firstElementChild;
                    nextActiveContent = myTabContent.querySelector(nextActiveButton.dataset.bsTarget)

                } else {
                    nextActiveItem = currentActiveItem;
                    nextActiveButton = currentActiveButton;
                    nextActiveContent = myTabContent.querySelector(nextActiveButton.dataset.bsTarget)
                }


                // 活跃显示

                nextActiveButton.classList.add("active");
                nextActiveContent.classList.add("active", "show");
                // 最后删除

                item.remove();
                content.remove();
                e.stopPropagation();

            } else if (targetbtn) {
                // 当点击的是 button 不是outside  且不是icon 
                let button = e.target.closest("button.nav-link")
                currentActiveButton = button;
                currentActiveItem = button.closest(".nav .nav-item");
                console.log(currentActiveButton, currentActiveItem)
            }
            // addBtn
            // myTab
            // <li class="nav-item">
            // <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane">Home<i
            //       class="close-btn bi bi-x-lg"></i></button>
            // </li>
            //


        })

        myAddBtn.addEventListener("click", (e) => {

            let li = document.createElement("li")
            li.classList.add("nav-item");
            let btn = document.createElement("button");
            let iconHtml = '<i class="close-btn bi bi-x-lg"></i>';
            btn.innerHTML = "page" + count + iconHtml;
            btn.classList.add("nav-link", "active")
            btn.id = "page" + count;
            count++;
            btn.dataset.bsToggle = "tab";
            btn.dataset.bsTarget = `#${btn.id}-tab-pane`;
            console.log(btn);
            li.appendChild(btn);
            console.log(li);

            // <div class="tab-pane fade" id="disabled-tab-pane" 
            // >.yyyyyyyy</div>
            let content = document.createElement("div");
            content.classList.add("tab-pane", "fade")
            content.classList.add("active", "show");
            content.id = `${btn.id}-tab-pane`;
            content.innerHTML = "testingpage " + content.id;


            // todo :新增时移除旧的active 更新current
            let nodes = myTabContent.children
            for (let i = 0; i < nodes.length; i++) {
                nodes[i].classList.remove("active", "show")
            }
            for (let i = 0; i < myTab.children.length; i++) {
                myTab.children[i].firstElementChild.classList.remove("active")
            }
            currentActiveButton = btn;
            currentActiveItem = btn.parentNode;


            // 最后加入挂载
            myAddBtn.insertAdjacentElement("beforebegin", li);
            myTabContent.appendChild(content);
        })
    </script>
</body>

</html>